import React, { useEffect, useState, useRef } from 'react';
import './App.css';
import axios from 'axios'
function App() {
  // const [num, setNum] = useState(10)
  // const [state, setstate] = useState<boolean>(false)
  // const [channels, setChannels] = useState([{id:1, name:'abc'}])
  // const [channels, setChannels] = useState<any[]>([])
  const [channels, setChannels] = useState<{id:number, name:string}[]>([])
  useEffect(() => {
    axios.get('http://geek.itheima.net/v1_0/channels').then(res=>{
      const t = res.data.data.channels
      // console.log(t)
      setChannels(t)
    })
  }, [])

  const refInput = useRef<HTMLInputElement>(null)
  const getInput = () => {
    // if(refInput.current) {
    //   console.log( refInput.current.value )
    // }
    // 非空断言
    console.log( refInput.current?.value )

  }
  return (
    <div className="App" >
      <input ref={refInput}/>
      <button onClick={getInput}>getInput</button>
      {
        channels.map(it => <p>{it.id}, {it.name}</p>)
      }
      {/* {num} */}
      {/* <button onClick={()=>setNum(num+1)}>+1</button> */}
    </div>
  );
}

export default App;
